@import 'constants.styl';

article {
	color: #444;
	font-family: microsoft yahei;

	p {
		line-height: 24px;
	}

	.highlight {
		padding: 0 0.5em;
		background: #282c34;
		color: #abb2bf;
		margin: 25px 0;
		border-radius: $radius;
		overflow: auto;

		.gutter {
			border-right: 1px solid #35393b;
		}
	}

	pre {
		border-radius: $radius;
		overflow: hidden;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		margin: 0;
		padding: 0 6px 0 0;
		position: relative;
		background: #282c34;
		line-height: 1.3em;

		code {
			position: relative;
			border: none;
			border-radius: 0;
			font-size: 100%;
			font-family: Consolas;
		}
	}

	a {
		-webkit-transition: color 0.35s ease-out;
		transition: color 0.35s ease-out;
		color: $color1;
		text-decoration: none;
		word-wrap: break-word;

		&::before {
			font-family: 'kirafont';
			content: '\ec7f\ ';
		}

		&:hover,
		&:focus {
			color: $color1;
			text-decoration: underline;
		}

		&.CodePenLink {
			transition: 0.2s;
			padding: 0.2em;
			color: $color1;
			border-bottom: 1px solid $krdbgc1;

			&:hover {
				text-shadow: 0px 0px 5px $krlbgc1;
				text-decoration: none;
				border-bottom: 1px solid $color1;
			}
		}
	}

	p {
		margin: $gutter 0;
		position: relative;

		&::after {
			content: '';
			clear: both;
			display: block;
		}
	}

	code {
		display: inline;
		border-radius: 4px;
		font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace, Roboto,
			RobotoNum, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica,
			Arial, sans-serif, 'Segoe UI';
		padding: 0 4px;
		margin: 1px 3px;
		word-break: break-all;
		color: $color1;
		background-color: $krlbgc1;
	}

	del {
		color: #999;
		font-size: 0.9em;
	}

	img {
		display: block;
		border-radius: $radius;
		margin: 0 auto;

		&:not(.kira-post-cover-image) {
			cursor: pointer;
			transition: all 0.3s ease;

			&:hover {
				box-shadow: 0 0 10px rgba($krlbgc1, 0.3);
				transform: scale(1.01, 1.01);
				border-radius: 0;
			}

			&:active {
				transform: scale(1, 1);
			}
		}

		&.lazyload,
		&.lazyloading {
			opacity: 0;
			transition: opacity 400ms ease-out;
		}

		&.lazyloaded {
			opacity: 1;
		}
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		color: #111;
		margin: $gutter 0;
	}

	h4,
	h5,
	h6 {
		position: relative;

		&::before {
			display: inline-block;
			width: 1em;
			content: '#';
			color: $color1;
		}
	}

	h1 {
		font-size: 2.5em;
	}

	h2 {
		font-size: 1.7em;
		position: relative;
		padding-bottom: 10px;

		&::before {
			content: '';
			width: 100%;
			padding: 0px $gutter;
			border-bottom: 1px solid #eee;
			position: absolute;
			bottom: -1px;
			left: -($gutter);
			box-sizing: unset;
		}

		&::after {
			transition: all 0.35s ease-out;
			content: '';
			position: absolute;
			background: $color1;
			width: 1em;
			height: 5px;
			bottom: -3px;
			left: 0;
			border-radius: 10px;
		}

		&:hover::after {
			width: 2em;
		}
	}

	h3 {
		font-size: 1.3em;
	}

	h4 {
		font-size: 1.15em;
	}

	h5 {
		font-size: 1em;
	}

	h6 {
		font-size: 0.9em;
	}

	blockquote {
		color: #666;
		margin: $gutter 0;
		padding: 0.1em 2.2em;
		background-color: #f8f8f8;
		line-height: 28px;
		position: relative;
		border-radius: 10px;
		border: 1px solid #eee;
		font-family: sf pro sc, sf pro display, sf pro icons, aos icons, pingfang sc, helvetica neue,
			helvetica, arial, sans-serif;

		&::before {
			content: '\201C';
			top: 15px;
			left: 10px;
			position: absolute;
			color: #888;
			font-size: 3em;
		}

		&::after {
			content: '\201D';
			bottom: -8px;
			right: 10px;
			position: absolute;
			color: #888;
			font-size: 3em;
		}
	}

	hr {
		display: block;
		border: 0;
		border-top: 1px dashed #ccc;
		margin: $gutter 0;
		padding: 0;
	}

	sub,
	sup {
		font-size: 75%;
		line-height: 0;
		position: relative;
		vertical-align: baseline;
	}

	sub {
		bottom: -0.25em;
	}

	sup {
		top: -0.5em;
	}

	ul {
		padding: 0 0 0 2em;
		margin-top: 0;
		list-style: none;
		padding-left: 0 !important;

		.mdui-checkbox {
			padding-left: 22px;
			height: 18px;
		}

		.mdui-checkbox-icon {
			top: 4px;
		}

		li {
			position: relative;
			padding: 10px 0;
			padding-left: 25px;
			line-height: 1rem;

			&::before {
				content: '';
				width: 10px;
				height: 10px;
				background: $color1;
				display: inline-block;
				vertical-align: middle;
				margin-right: 12px;
				margin-left: -26px;
				border-radius: 100%;
				border: 3px solid #fff;
				z-index: 3;
				position: relative;
			}

			&::after {
				content: '';
				height: 100%;
				width: 1.5px;
				background: $krlbgc1;
				position: absolute;
				left: 6.25px;
				top: 20px;
			}

			&:last-child::after {
				display: none;
			}
		}

		span {
			margin-right: 15px;
		}
	}

	ol {
		padding: 0 0 0 2.5em;
		margin-top: 0;
	}

	& > ol {
		list-style-type: none;
		counter-reset: item;

		& > li {
			position: relative;

			&::before {
				content: counter(item);
				counter-increment: item;
				position: absolute;
				top: 0.2rem;
				left: -2.5em;
				height: 1.6rem;
				width: 1.6rem;
				text-align: center;
				border-radius: 8px;
				line-height: 1.6rem;
				background-color: $krlbgc1;
				color: $color1;
			}
		}
	}

	li {
		line-height: 2rem;

		p {
			margin: 0 !important;
		}
	}

	dd {
		margin: 0 0 0 2em;
	}

	& > table {
		color: #5b6064;
		border-spacing: 0;
		border-collapse: collapse;
		max-width: 100%;
		overflow: auto;
		white-space: nowrap;
		margin: 25px auto;
		background: transparent;
		display: block;

		&::-webkit-scrollbar {
			width: 6px;
			height: 6px;
		}

		&::-webkit-scrollbar-thumb {
			background-color: #888;
		}

		thead {
			border-bottom: 1px solid #eee;
			background-color: #f8f8f8;

			tr {
				background-color: #f8f8f8;
			}
		}

		th {
			border: 1px solid #eee;
			padding: 13px 26px;
			font-weight: 400;
		}

		td {
			border: 1px solid #eee;
			padding: 13px 26px;
		}

		tr {
			background-color: #fff;

			&:nth-child(2n) {
				background-color: #f8f8f8;
			}
		}
	}

	img,
	canvas,
	iframe,
	video,
	svg,
	select,
	textarea {
		width: auto;
		max-width: 100%;
	}

	input[type='checkbox'] {
		margin-right: 0.25em;

		&::after {
			content: '✔';
			width: 1.25em;
			height: 1.25em;
			font-size: 0.8em;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #fff;
			background-color: #ffffff;
			border: 1px solid #d9d9d9;
			border-radius: 0.25em;
			cursor: pointer;
		}

		&:disabled::after {
			cursor: not-allowed;	
		}

		&:checked::after {
			border-color: $color1;
			background-color: $color1;
		}
	}
}

details {
	ul {
		padding-left: 1.7em;
	}

	&[open] > summary {
		.add {
			display: none;
		}
		.remove {
			display: inline-block;
		}
	}

	summary {
		cursor: pointer;

		i {
			margin-right: 0.3em;
			width: 24px;
		}

		.remove {
			display: none;
		}
	}

	.mdui-btn {
		background-color: $color1;
		color: #fff;
		border-radius: 10px;

		&:focus,
		&:active {
			background-color: $color1;
			color: #fff;
		}
	}

	.aplayer {
		-webkit-box-shadow: 0 0 0 1px #eee !important;
		box-shadow: 0 0 0 1px #eee !important;
		border-radius: 10px !important;
		margin: $gutter 0 !important;
		height: 90px;

		.aplayer-info {
			padding: 9px 7px 0 10px !important;

			.aplayer-controller {
				.aplayer-bar-wrap {
					margin-left: 1px !important;
					padding-right: 3px;

					.aplayer-bar {
						&,
						& .aplayer-loaded,
						& .aplayer-played {
							height: 6px !important;
							border-radius: 10px !important;
						}

						.aplayer-played .aplayer-thumb {
							height: 12px !important;
							width: 12px !important;
							right: 3px !important;
							-webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.18) !important;
							box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.18) !important;
							-webkit-transition: all 0.35s ease-out;
							transition: all 0.35s ease-out;
						}
					}
				}

				.aplayer-volume-wrap .aplayer-volume-bar-wrap .aplayer-volume-bar {
					right: 10.5px;

					&,
					& .aplayer-volume {
						border-radius: 10px;
						width: 6px;
					}
				}
			}
		}

		.aplayer-list ol li {
			border-top: none !important;

			&.aplayer-list-light {
				background: #f8f8f8 !important;
			}
		}
	}

	div.kira-aplayer-container {
		margin: 0;

		div[id^='aplayer-'] {
			div.aplayer-body {
				div.aplayer-pic {
					width: 90px;
					height: 90px;
				}

				div.aplayer-info {
					margin-left: 90px;
					height: 90px;

					div.aplayer-controller > div.aplayer-bar-wrap > div.aplayer-bar > div.aplayer-played {
						background: $color1 !important;

						span.aplayer-thumb {
							background: $color1 !important;
						}
					}
				}
			}
		}
	}
}
